<template>
	<view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub">
							<view>{{ evaluate.name }}</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					{{ evaluate.content }}
				</view>
				<view class="text-content">
					<button class='cu-btn bg-green shadow' @click="tanchu()">评论</button>
				</view>
				<view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item" v-for="(item,i) in commentList" :key="item">
						<view class="cu-avatar round"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);">
						</view>
						<view class="content">
							<view class="text-grey">{{ item.stuName }}</view>
							<view class="text-gray text-content text-df">
								{{ item.content }}
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{ item.createTime }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<van-popup :show="show" position="bottom" custom-style="height: 20%;" round closeable>
			<view class="cu-form-group margin-top">
				<input type="text"  placeholder="请输入评论" v-model="comment.content"></input>
				<van-button round type="info" size="mini" @click="submit()">发送</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaId: "",
				evaluate: {
					id: "",
					name: "",
					content: ""
				},
				commentList: [],
				show: false,
				comment: {
					content: "",
					stuId: "",
					commentId: ""
				}
			}
		},
		created() {

		},
		onLoad: function(option) {
			this.evaId = option.evaId
			// console.log(option.evaId)
			this.getCommentList();
			this.getData();
		},
		methods: {
			tanchu() {
				this.show = true
			},
			// showPopup() {
			// 	this.show = true;
			// },
			submit() {
				console.log("提交评论!!!")
				this.comment.commentId = this.evaluate.id;
				this.comment.stuId = uni.getStorageSync('stuId');
				uni.request({
					url: 'http://localhost:8082/task_admin/comment/add',
					dataType: "json",
					method: "POST",
					data: this.comment,
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.comment.content = ""
							this.getCommentList();
							this.show = false
						}
					}
				})
			},
			getData() {
				uni.request({
					url: 'http://localhost:8082/task_admin/evaluate/queryEvaluate?id=' + this.evaId,
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.evaluate = res.data.data
						}
					}
				})
			},
			getCommentList() {
				uni.request({
					url: 'http://localhost:8082/task_admin/comment/list?evaId=' + this.evaId,
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.commentList = res.data.data
						}
					}
				})
			}
		}
	}
</script>

<style>
	.pinglun {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop_overlay {
		width: 100%;
		height: 100%;
		background: #c2c2c2;
		opacity: 0.5;
		filter: alpha(opacity=50);
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		display: none;
	}

	.pop_con {
		width: 534px;
		height: 400px;
		z-index: 2;
		background: #ffffff;
		position: absolute;
		top: 95%;
		left: 50%;
		margin-left: -267px;
		display: none;
	}
</style>
